define(() => {
    return function () {
        let data =[];
        const arr_li = document.querySelectorAll(".nav-left>li");
        ajax({
            url: "http://localhost:3000/data/nav-min.json",
            success: res => {
                data = JSON.parse(res);
                initialize(arr_li,data);
                createElement(arr_li,data);
            }
        })
    }
})
function initialize(arr,data) {
    for (let i = 0; i < arr.length; i++) {
        const span1 = document.createElement("span");
        const span2 = document.createElement("span");
        span1.innerHTML = data[i].title1;
        span2.innerHTML = data[i].title2;
        arr[i].appendChild(span1);
        arr[i].appendChild(span2);
    }
}

function createElement(arr,data) {
    for (let i = 0; i < arr.length; i++) {
        let index = i;
        const arr_subPanel = [];
        const ele_sub = document.createElement("div");
        ele_sub.className = "sub-panel";
        renderdata(data,ele_sub, index);
        arr[i].appendChild(ele_sub);
        arr_subPanel.push(ele_sub);
    }
}

function renderdata(data,ele, index) {
    let arr = data[index].sub;
    for (let i = 0; i < arr.length; i++) {
        const ele_div = document.createElement("div");
        const ele_h3 = document.createElement("h3");
        ele_h3.innerHTML = arr[i].name;
        ele_div.appendChild(ele_h3);
        for (let j = 0; j < arr[i].sub.length; j++) {
            const ele_span = document.createElement("span");
            ele_span.innerHTML = arr[i].sub[j];
            ele_div.appendChild(ele_span);
        }
        ele.appendChild(ele_div);
    }
}

